<template>
  <NButton @click="onClick">
    <template v-if="renderIcon" #icon>
      <template v-if="typeof renderIcon === 'function'">
        <component :is="renderIcon" />
      </template>
      <template v-else-if="defaultRenderIcon">
        <component :is="defaultRenderIcon" />
      </template>
    </template>

    <template v-if="content">
      <template v-if="typeof content === 'function'">
        <component :is="content" />
      </template>
      <template v-else>
        {{ content }}
      </template>
    </template>
  </NButton>
</template>

<script setup lang="ts">
import type { VNodeChild } from 'vue'
import type { NvBtnOption } from '@/types'
import { NButton } from 'naive-ui'

interface Props {
  content?: NvBtnOption['content']
  renderIcon?: NvBtnOption['renderIcon']
  defaultRenderIcon?: () => VNodeChild
  onClick?: NvBtnOption['onClick']
}
withDefaults(defineProps<Props>(), {
  renderIcon: true,
})
</script>
